<template>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/" class="custom-breadcrumb">
        <el-breadcrumb-item><span class="breadcrumb-strong">首页</span></el-breadcrumb-item>
        <el-breadcrumb-item><span class="breadcrumb-strong">事件处理</span></el-breadcrumb-item>
        <el-breadcrumb-item>我的代办</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询条件卡片 -->
    <el-card>
        行业名称：
        <el-select v-model="searchForm.professionalId" placeholder="请选择" style="width: 150px;">
            <el-option v-for="item in professionalOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        &nbsp;
        表单分类：
        <el-select v-model="searchForm.typeId" placeholder="请选择" style="width: 150px;" @change="onTypeChange">
            <el-option v-for="item in formTypeOptions" :key="item.TypeId" :label="item.TypeName" :value="item.TypeId" />
        </el-select>
        &nbsp;
        表单：
        <el-select v-model="searchForm.formId" placeholder="请选择" style="width: 150px;">
            <el-option v-for="item in formOptions" :key="item.FormId" :label="item.FormName" :value="item.FormId" />
        </el-select>
        <br>
        <el-button type="primary" @click="handleSearch" style="margin: 20px 0 0 0;">搜索</el-button>
        <el-button @click="handleReset" type="danger" style="margin: 20px 0 0 10px;">重置</el-button>
    </el-card>
    <br>
    <el-card>
        <el-table :data="tableData" style="width: 100%;">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="FormNo" label="表单编号" />
            <el-table-column prop="FormName" label="表单名称" />
            <el-table-column prop="FlowName" label="流程名称" />
            <el-table-column prop="CurrentOperator" label="当前操作人员" />
            <el-table-column prop="CurrentOperateTime" label="当前操作时间" />
            <el-table-column label="操作" width="100">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleShowDetail(scope.row)">操作</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog v-model="dialogVisible" title="待办详情" width="900px" :close-on-click-modal="false">
        <el-form label-width="100px" class="detail-form">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="姓名">
                        <el-input v-model="detailData.Name" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="性别">
                        <el-radio-group v-model="detailData.Gender" disabled>
                            <el-radio label="男">男</el-radio>
                            <el-radio label="女">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="出生日期">
                        <el-input v-model="detailData.BirthDate" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="籍贯">
                        <el-select v-model="detailData.NativePlace" disabled>
                            <el-option :label="detailData.NativePlace" :value="detailData.NativePlace" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="初始密码">
                        <el-input v-model="detailData.Password" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="内部推荐">
                        <el-checkbox v-model="detailData.InternalRecommend" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="兴趣爱好">
                        <el-checkbox-group v-model="detailData.Hobbies" disabled>
                            <el-checkbox label="爬山" />
                            <el-checkbox label="踢球" />
                            <el-checkbox label="骑行" />
                            <el-checkbox label="跑步" />
                        </el-checkbox-group>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="薪资">
                        <el-input v-model="detailData.Salary" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="简介">
                        <el-input v-model="detailData.Intro" type="textarea" disabled />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div v-if="detailData.Steps && detailData.Steps.length" class="audit-table-wrap">
            <table class="audit-table">
                <tr>
                    <th colspan="6" style="text-align:left;">审核第 {{ currentStepIndex + 1 }} 步</th>
                </tr>
                <tr>
                    <td>审核人</td>
                    <td>{{ currentStep.Auditor }}</td>
                    <td>审核结果</td>
                    <td>{{ currentStep.Result }}</td>
                    <td>审核意见</td>
                    <td>{{ currentStep.Comment }}</td>
                </tr>
                <tr>
                    <td>审核时间</td>
                    <td>{{ currentStep.Time }}</td>
                    <td colspan="4"></td>
                </tr>
            </table>
            <el-form-item label="意见" style="margin-top: 16px;">
                <el-input v-model="auditComment" type="textarea" :rows="2" placeholder="请输入意见" />
            </el-form-item>
            <div style="margin-top: 16px;">
                <el-button type="success" @click="handleApprove">同意</el-button>
                <el-button type="danger" @click="handleReject">拒绝</el-button>
                <el-button @click="dialogVisible = false">关闭</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { ElMessage } from 'element-plus';
import { getMyTodoList, getMyTodoDetail } from '@/api/Instance';
import { GetFormTypeList } from '@/api/formType';
import { getFormList } from '@/api/formInfo';

// 查询条件
const searchForm = reactive({
    professionalId: null,
    typeId: null,
    formId: null
});

// 下拉选项
const professionalOptions = [
    { label: '行政', value: 1 },
    { label: '公安', value: 2 }
];
const formTypeOptions = ref<any[]>([]);
const formOptions = ref<any[]>([]);

// 表格数据
const tableData = ref<any[]>([]);

// 获取表单分类下拉
const fetchFormTypeOptions = async () => {
    try {
        const res = await GetFormTypeList();
        formTypeOptions.value = res.data.Result || [];
    } catch (e) {
        formTypeOptions.value = [];
    }
};
// 获取表单下拉
const fetchFormOptions = async () => {
    try {
        const res = await getFormList(searchForm.typeId || 0);
        formOptions.value = res.data.Result || [];
    } catch (e) {
        formOptions.value = [];
    }
};

const handleSearch = async () => {
    try {
        const res = await getMyTodoList({
            professionalId: searchForm.professionalId,
            typeId: searchForm.typeId,
            formId: searchForm.formId
        });
        tableData.value = res.data.Result || [];
    } catch (e) {
        ElMessage.error('获取待办数据失败');
    }
};

const handleReset = () => {
    searchForm.professionalId = null;
    searchForm.typeId = null;
    searchForm.formId = null;
    tableData.value = [];
};

onMounted(() => {
    fetchFormTypeOptions();
    fetchFormOptions();
    handleSearch();
});

// 联动：表单分类变化时刷新表单下拉
const onTypeChange = () => {
    searchForm.formId = null;
    fetchFormOptions();
};

const dialogVisible = ref(false);
const detailData = ref<any>({});
const auditComment = ref('');
const currentStepIndex = ref(0);
const currentStep = computed(() => (detailData.value.Steps && detailData.value.Steps[currentStepIndex.value]) || {});

const handleShowDetail = async (row: any) => {
    try {
        const res = await getMyTodoDetail({ id: row.Id });
        detailData.value = res.data.Result || {};
        // 假设后端返回当前步骤索引
        currentStepIndex.value = detailData.value.CurrentStepIndex || 0;
        auditComment.value = '';
        dialogVisible.value = true;
    } catch (e) {
        ElMessage.error('获取详情失败');
    }
};

const handleApprove = () => {
    // TODO: 审批同意逻辑
    ElMessage.success('已同意');
    dialogVisible.value = false;
};
const handleReject = () => {
    // TODO: 审批拒绝逻辑
    ElMessage.warning('已拒绝');
    dialogVisible.value = false;
};
</script>

<style scoped>
.custom-breadcrumb {
    margin-bottom: 18px;
    font-size: 17px;
}

.breadcrumb-strong {
    font-weight: bold;
}

.audit-table-wrap {
    margin: 24px 0 0 0;
}

.audit-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.audit-table th,
.audit-table td {
    border: 1px solid #aaa;
    padding: 6px 12px;
    font-size: 15px;
}

.audit-table th {
    background: #f8f8f8;
    font-weight: bold;
}
</style>